<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>聚焦失焦</title>
	<link rel="stylesheet" href="focus.css">
</head>
<body>
	<div class="wrapper">
		<div class = "reg">注册会员</div>
		<form action="#">
			<div class = "tele">
				<span  class = "tel">+86</span>
				<input id = "in" type="text"  placeholder = "请输入你的手机号" class = "tel"><br>
			</div>
			<input type="submit" value = "注册" class = "btn">
			<div class = "com">
				<span>使用社交帐号注册</span>
				<span class = "chat">
					<img src="weibo.png" alt="">
				</span>
				<span class = "chat">
					<img src="wechat.png" alt="">
				</span>
				<span class = "chat">
					<img src="qq.png" alt="">
				</span>
			</div>
		</form>
	</div>
	<script>
		var input=document.querySelector('#in');
		input.onfocus=function(argument) {
			// body...
			input.style='background-color:white';
		}
		input.onblur=function(){
			input.style='background-color:#f4f4f4';
		}
	</script>	
</body>
</html>